<template>
  <div>
    <!-- <div class="header"> -->
      <!-- <MoreFilter :formDataConfig="formDataConfig" @onSubmit="onSubmit" @resetForm="resetForm"></MoreFilter> -->
    <!-- </div> -->
    <div class="table">
      <div class="mt-20 mb-20">共 {{ pageable.total }} 条内容</div>
      <div v-if="pageable.total == 0" class="mt-20 d-flex jc-center ai-center" style="flex-direction: column;">
        <img src="@/assets/img/homePage/noneData.png" alt="" />
          <div class="fs-14 mt-15" style="color: #7e7e7e">暂无数据</div>
      </div>
      <div v-else class="table_item" v-for="(item,index) in dataList" :key="index">
        <div style="display: flex;flex-direction: row;align-items: start;">
          <div class="table_tou">
          <img :src="item.avatar" alt="" style="width: 40px;height: 40px;border-radius: 50%;">
        </div>
        <div class="table_title">
          <div>
            <div class="d-flex ai-center">
              <span style="margin-right: 10px;">
              {{item.userName}}
              </span>
              <img :src="item.vipLevel" alt="" v-if="item.level">
            </div>
            <div class="mt-10 fs-14" style="color: #7e7e7e;">
              {{ item.title }}
            </div>
          </div>
          <div>
            <span style="color: var(--el-color-primary);margin-right: 10px;">
              充电单号：{{item.charge_order}}
            </span>
            <span v-if="item.state == 1" style="margin-right: 10px;font-size: 14px;color: #FFF;background-color: #03BF8F;padding: 2px 8px;">
              充电中
            </span>
            <span>
              开始时间：{{ item.time }}
            </span>
          </div>
        </div>
        </div>
        <div class="table_content d-flex jc-between ai-center ml-50 mt-20">
          <div>
            <div>
              登录账号：{{ item.userNumber }}
            </div>
            <div  class="mt-5">
              归属机构：{{ item.company }}
            </div>
            <div  class="mt-5">
              充电车辆：{{ item.terminal_name }}
            </div>
          </div>
          <div>
            <div>
              已充时间：{{ item.charge_times }} 分钟
            </div>
            <div  class="mt-5">
              已充电量：{{ item.charge_dian }} 度
            </div>
            <div  class="mt-5">
              当前SOC：{{ item.soc }} %
            </div>
          </div>
          <div>
            <div>
              电站名称：{{ item.state_name }}
            </div>
            <div  class="mt-5">
              终端名称：{{ item.terminal_name }}
            </div>
            <div  class="mt-5">
              运营商：{{ item.operatorType == 1 ? '[自营]' : '[加盟]' }}{{ item.operator }}
            </div>
          </div>
          <div>
            <div>
              交易类型：
              <span v-if="item.payType == 0">余额</span>
              <span v-if="item.payType == 1">余额+R值</span>
              <span v-if="item.payType == 2">米豆</span>
              <span v-if="item.payType == 3">微信</span>
              <span v-if="item.payType == 4">支付宝</span>
            </div>
            <div  class="mt-5">
              订单类型：{{ item.orderType }}
            </div>
            <div  class="mt-5">
              充电模式：{{ item.chargeModel == 0 ? '单充' : '双枪并充' }}
            </div>
          </div>
          <div style="color: var(--el-color-primary);cursor: pointer;" @click="showPopF(item)">
            查看数据
          </div>
        </div>
      </div>
    </div>
    <div class="footer"  v-if="pageable.total !== 0">
      <Pagination :pageable="pageable" @getPagination="getPagination"></Pagination>
    </div>
    <el-drawer :with-header="false" v-model="showPop" size="952" class="equity-drawer" >
      <nowOrderpop ref="nowOrderpopref" @close="close"></nowOrderpop>
    </el-drawer>

  </div>
</template>

<script setup>
import nowOrderpop from "./nowOrderpop.vue";
import {chargeNowOrder} from "@/api/modules/powerStation";
const props = defineProps({
  seach:{
    type:Object,
    default:{}
  }
});
watch(
  () => props.seach,
  async (newValue) => {
    props.seach = newValue;
    getList();
  },
);

// 表格数据
const dataList = ref([]);
// 分页请求数据
const pageable = ref({
  current:1,
  size:10,
  total:0
});
// 获取list数据
const getList = async () => {
  // console.log(props.seach,'props.seach===>调用真实接口时，需要添加这个筛选参数')
  const res = await chargeNowOrder(pageable.value);
  if(res.code == 200){
    pageable.value = {
      current:res.data.current_page,
      size:res.data.per_page,
      total:res.data.total
    };
    dataList.value = [...res.data.data];
  }
};
//分页
const getPagination = (page) => {
  console.log(page,'page');
}

const showPop = ref(false);
const { proxy } = getCurrentInstance();

const showPopF = (val) =>{
  showPop.value = true;
  setTimeout(() => {
    proxy.$refs.nowOrderpopref.getRowData(val);
  }, 100);
}
const close = () =>{
  showPop.value = false;

}

onMounted(() => {
  // 获取列表数据
  getList();

});
</script>

<style lang="scss" scoped>
.header{
  border: 1px solid #ccc;
}
.table{
  &_item{
    padding: 20px;
  }
  &_tou{
    width: 50px;
    height: 50px;
  }
  &_title{
    width: calc(100% - 50px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  &_item:hover{
    background-color: #F0F6FE;
  }
}
.footer{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
